<template>
  <view>
    <view 
      v-for="(item, index) in favoriterList" 
      :key="index" 
      class="item"
	  @click="gotoFavorite(item)"
    >
      <view class="row">
        <text class="name">{{ item.name }}</text>
        <text class="content-num">{{ item.contentNum }}</text>
      </view>
      <text class="last-mod-date">last Update: {{ item.lastUpdate }}</text>
    </view>
    
    <view class="new-folder" @click="open">
      <u-icon name="plus" size="80rpx"></u-icon>
      <text>新建收藏夹</text>
    </view>
    
    <u-popup :show="show" mode="center" @close="close">
      <view class="popup-content">
        <u-input 
          v-model="newFavoriterName" 
          placeholder="输入新的收藏夹名字" 
          clearable 
          class="input-field"
        ></u-input>
        <view class="button-group">
          <button class="confirm-button" @click="createFavorite()">确认</button>
          <button class="cancel-button" @click="close()">取消</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      favoriterList: [],
      show: false,
      newFavoriterName: '', // 新收藏夹名称
	  uid:'',
	  token:'',
    };
  },
  methods: {
	initPage(){
		this.uid=uni.getStorageSync('UID');
		this.token=uni.getStorageSync('token'); 
		if(this.uid!=''&&this.token!=''){
			this.getFavorites();
		}
	},
    open() {
      this.show = true;
      this.newFavoriterName = ''; // 清空输入框
    },
    close() {
      this.show = false;
    },
	getFavorites(){
		this.favoriterList.splice(0,this.favoriterList.length);
		uni.request({
			url:this.baseUrl+'/getFavorites',
			method:'POST',
			data:{
				data:{
					userId:this.uid
				},
				msgType:'getFavorites'
			},
			header: {
				'Content-Type': 'application/json',// 如果需要以JSON格式发送数据
				'token':this.token,
				'uid':this.uid
			},
			success: (res) => {
				console.log(res.data);
				const resArray=res.data.data;
				for(let i=0;i<resArray.length;i++){
					const set={
						id:resArray[i].folderId,
						name:resArray[i].folderName,
						contentNum:resArray[i].postNum,
						lastUpdate:resArray[i].lastUpdate.split('T')[0],
						};
					this.favoriterList.push(set);
				}
			},
		});
	},
    createFavorite() {
      if (this.newFavoriterName.trim() === '') {
        uni.showToast({
          title: '新收藏夹名称不能为空',
          icon: 'none',
        });
        return;
      }
	  uni.request({
	  	url:this.baseUrl+'/creatFolder',
		method:'POST',
		data:{
			data:{
				userId:this.uid,
				folderName:this.newFavoriterName
			},
			msgType:'creatFolder'
		},
		header: {
			'Content-Type': 'application/json',// 如果需要以JSON格式发送数据
			'token':this.token,
			'uid':this.uid
		},
		success: (res) => {
			console.log(res.data);
			this.getFavorites();
		},
	  })
	  this.close(); // 关闭对话框
	},
	gotoFavorite(item){
		//console.log(item);
		uni.navigateTo({
			url:'/pages/favorites/favorite/favorite?folderId='+item.id
		})
	},
  },
  mounted(){
	  this.initPage();
  },
};
</script>

<style>
.item {
  padding: 15rpx;
  border-radius: 10rpx;
  background-color: #f9f9f9;
  border: 1rpx solid #e0e0e0;
  margin: 20rpx 0;
  margin-left: 10rpx;
  margin-right: 10rpx;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.name {
  font-size: 35rpx;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75%;
}

.content-num {
  font-size: 30rpx;
  color: #666;
  background-color: #e0f7fa;
  padding: 8rpx 15rpx;
  border-radius: 4rpx;
}

.last-mod-date {
  font-size: 28rpx;
  color: #999;
  margin-top: 5rpx;
}

.new-folder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15rpx;
  margin: 20rpx 0;
  background-color: #f9f9f9;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
}

.popup-content {
	width: 550rpx;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
}

.input-field {
  height: 100rpx;
  margin-bottom: 20rpx;
  border: 1px solid #e0e0e0; /* 添加边框 */
  border-radius: 8rpx; /* 圆角 */
  padding: 10rpx; /* 内边距 */
}

.button-group {
  display: flex;
  justify-content: space-between;
}

.confirm-button {
  background-color: #007AFF;
  color: #fff;
  border: none;
  height: 80rpx;
  border-radius: 8rpx; /* 圆角 */
  flex: 1; /* 使按钮均分空间 */
  margin-right: 10rpx; /* 增加按钮之间的间距 */
  transition: background-color 0.3s; /* 添加过渡效果 */
}

.confirm-button:hover {
  background-color: #005bb5; /* 悬停效果 */
}

.cancel-button {
  background-color: #e0e0e0;
  color: #333;
  border: none;
  height: 80rpx;
  border-radius: 8rpx; /* 圆角 */
  flex: 1; /* 使按钮均分空间 */
  margin-left: 10rpx; /* 增加按钮之间的间距 */
  transition: background-color 0.3s; /* 添加过渡效果 */
}

.cancel-button:hover {
  background-color: #d0d0d0; /* 悬停效果 */
}
</style>
